<template>
  <view>
    <!-- 搜索框 -->
    <view class="mySearch">
      <view class="myinput">
        <input type="text" class="uni-input" @input="searchKeyWord" focus :placeholder="placeholder" />
        <uni-icons type="search" size="25"></uni-icons>

      </view>
      <view class="search" @click="preserveHistoryRecord">搜索</view>
    </view>
    <!-- 这里显示历史记录 -->
    <view class=" historyRecord" v-if="!searchSongsList.length">
      <view class="recordContainer" v-for="(item,i) in arrKeyWord" :key="i">{{item.keyWord}}</view>
      <uni-icons class="trashCan" type="trash-filled" size="30"></uni-icons>
    </view>
    <!-- 热搜版 -->
    <block v-if="!searchSongsList.length">
      <view class="hot">热搜榜</view>
      <view class="hotContainer">
        <view class="Container" v-for="(item,i) in hotList" :key="i">
          <view class="hotNumber">{{i+1}}.</view>
          <text class="hotContent">{{item.searchWord}}</text>
          <image class="hoturl" :src="item.iconUrl" v-if="item.iconType===1"></image>
        </view>
      </view>
    </block>
    <!-- 搜索界面的内容 -->
    <view class="searchui" v-else>

      <view class="searchContent" v-for="(item,i) in searchSongsList" :key="i">
        <image class="avater" :src="item.al.picUrl"></image>
        <view class="songsname" @click="preserveHistoryRecord">
          <text class="big">{{item.name}}</text>
          <text class="small">{{item.al.name}}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 默认词
        placeholder: '',
        // 热词排行榜
        hotList: [],
        // 节流操作
        timer: null,
        // 歌曲列表
        searchSongsList: [],
        // 保存关键字
        keyWord: '',
        // 保存关键字的数组
        arrKeyWord: []
      }
    },
    onLoad() {
      // 获取默认搜索关键字
      this.getDefaultKeywoord()
      // 获取热搜版
      this.getHotList()
      this.arrKeyWord = JSON.parse(uni.getStorageSync('arrKeyWord') || '[]')
    },
    methods: {
      // 获取input内的内容
      searchKeyWord(event) {
        // 节流操作
        console.log(event.detail.value)
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          // 发请求
          this.getsearchKeyWord(event.detail.value.trim())
          // console.log(event.detail.value)

        }, 500)

      },
      // 获取搜索内容
      async getsearchKeyWord(keyWord) {
        if (!keyWord) {
          return this.searchSongsList = []
        }
        const {
          data: res
        } = await uni.$http.get('/cloudsearch?keywords=' + keyWord + '&limit=10')
        console.log(res.result.songs)
        this.keyWord = keyWord
        this.searchSongsList = res.result.songs
      },
      // 获取默认搜索关键字
      async getDefaultKeywoord() {
        const {
          data: res
        } = await uni.$http.get('/search/default')
        console.log(res)
        this.placeholder = res.data.realkeyword
      },
      // 获取热搜版
      async getHotList() {
        const {
          data: res
        } = await uni.$http.get('/search/hot/detail')
        console.log(res)
        this.hotList = res.data
      },
      // 只要点击就保存历史消息
      preserveHistoryRecord() {
        // 去重
        const index = this.arrKeyWord.findIndex(item => item.keyWord === this.keyWord)
        if (index !== -1) {
          this.arrKeyWord.splice(index, 1)
        }
        this.arrKeyWord.unshift({
          keyWord: this.keyWord
        })
        // 保存到本地
        uni.setStorageSync('arrKeyWord', JSON.stringify(this.arrKeyWord))
        // 跳转去综合页面
        uni.navigateTo({
          url: '/subpkg/my_serchMultiple/my_serchMultiple?keywords=' + this.keyWord

        })
      }
    }
  }
</script>

<style>
  .historyRecord {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    padding-left: 30rpx;
  }

  .trashCan {
    position: absolute;
    top: 8%;
    left: 90%;

  }

  .recordContainer {

    border-radius: 30px;
    width: 130rpx;
    height: 50rpx;
    background-color: #bdbdbda8;
    text-align: center;
    margin: 10rpx 15rpx;
    line-height: 50rpx;
  }

  .avater {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
  }

  .searchContent {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100vh;
    height: 140rpx;
    padding-left: 20rpx;
  }

  .songsname {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;

  }

  .songsname .big {
    font-size: 30rpx;


  }

  .songsname .small {
    font-size: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;

  }

  .hotContent {
    font-size: 30rpx;
    color: #353535;
  }

  .mySearch {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search {
    padding: 10rpx 40rpx;
    margin-top: 10rpx;
  }

  .uni-input {
    background-color: #eee;
    border-radius: 30px;
    height: 60rpx;
    padding-left: 70rpx;
    margin-top: 14rpx;
    margin-left: 20rpx;
    font-size: 27rpx;

  }

  .myinput {
    flex: 1;

  }

  .uni-icons {
    position: absolute;
    top: 27%;
    left: 4%;

  }

  .hot {
    margin-top: 30rpx;
    height: 100rpx;
    width: 100%;
    padding-left: 30rpx;
    line-height: 70rpx;
    border-bottom: 1px solid #eee;
  }

  .hotContainer {
    display: flex;
    flex-wrap: wrap
  }

  .Container {
    margin: 10px 0rpx;
    box-sizing: border-box;
    padding-left: 25rpx;
    display: flex;
    width: 50%;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
  }

  .hoturl {
    width: 49rpx;
    height: 26rpx;
    margin-left: 5rpx;
  }

  .hotNumber {
    margin-right: 10rpx;
  }
</style>
